<template>
    <ul id="shop-list">
        <li v-for="item in datass">
            <router-link :to="'/shopDetail/'+item.id">
                <p class="pic">
                    <img v-lazy="item.pic" :key="item.pic" />
                    <span>已售{{item.sale}}件</span>
                </p>
                <p class="title">
                <span class="tag1" v-show="item.tag1">{{item.tag1}}</span> 
                <span class="tag2" v-show="item.tag2">{{item.tag2}}</span> 
                <span class="com" v-show='item.com'>{{item.com}}</span>
                    {{item.title}}
                </p>
                <div>
                    <span class="price">{{item.price}}</span>
                    <p>
                        <span>{{item.starNum}}</span>
                        <i></i>
                    </p>
                </div>
                <p class="buy">立即购买</p>
            </router-link>
        </li>
    </ul>
</template>

<script>
export default {
    props:["datass"]
};


</script>

<style scpoed lang="scss">
#shop-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px 50px 10px;
    justify-content: space-between;
    li {
        width: 48.5%;
        margin-bottom: 10px;
        background-color: white;
        a {
            text-decoration: none;
        }

        .pic {
            img {
                width: 100%;
                border-radius: 5px 5px 0 0;
            }
        }
        .title {
            color: black;
            font-size: 12px;
            padding: 0 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            .tag1,
            .tag2,
            .com {
                display: inline-block;
                line-height: 14px;
                font-size: 8px;
                padding: 0px 5px;
                background-color: #f9e4a8;
            }
            .com{
                font-weight: 500;
                color:rgb(199, 199, 199);
                background-color: transparent;
            }

        }
        div {
            display: flex;
            justify-content: space-between;
            padding: 0 5px;
            span {
                color: black;
                font-weight: bold;
                font-size: 14px;
            }
            p {
                display: inline-block;
                line-height: 22px;

                span {
                    color: grey;
                    font-size: 11px;
                    font-weight: 400;
                }
                i {
                    width: 13px;
                    height: 13px;
                    display: inline-block;
                    background: url("../../assets/images/mall/star.png")
                        no-repeat center/cover;
                }
            }
        }
        .buy {
            color: white;
            text-align: center;
            margin: 0px 5px 5px;
            border-radius: 3px;
            line-height: 23px;
            font-size: 12px;
            background-color: #ff5777;
        }
    }
}
</style>